<template>
  <el-dialog
    v-model="dialogVisible"
    class="custom-dialog-pre"
    width="631px"
    @closed="handleDialogClose"
  >
    <div class="dialog-content">
      <div class="info">
        <div class="name">{{ currentData.name }}</div>
        <div class="time">经度:{{ pos.lon }} 纬度:{{ pos.lat }}</div>
      </div>
      <div class="dialog-content-echart">
        <div class="label-title" v-if="isShow('forecast:byHour')">逐时预报</div>
        <div class="content-tab" v-if="isShow('forecast:byHour')">
          <div class="tab-left">
            <div
              v-for="(item, index) in chartType"
              :key="index"
              :class="[filterActive == item.detailKey ? 'echartsActive' : '']"
              @click="echartsFilter(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- <div class="tab-right">
            <div>
              <img src="../images/table.png" alt="" />
            </div>
            <div>
              <img src="../images/download.png" alt="" />
            </div>
          </div> -->
        </div>
        <div
          class="content-echarts"
          v-loading="chartLoading"
          v-if="isShow('forecast:byHour')"
        >
          <VChart ref="chartRef" class="chart-content" :option="chartOption" />
        </div>
        <div
          class="label-title label-title-two"
          v-if="isShow('forecast:future')"
        >
          十天预报表
        </div>
        <div class="forecast-table" v-if="isShow('forecast:future')">
          <div class="right-column">
            <div
              class="column-header"
              v-for="(item, index) in predictionDayData"
              :key="index"
            >
              {{ item }}
            </div>
            <div class="column-content">
              <div
                class="right-line"
                v-for="(item, index) in tableData"
                :key="index"
              >
                <div
                  class="right-item"
                  v-for="(line, index) in item"
                  :key="index"
                >
                  {{ line }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="fileDownload" v-if="isShow('forecast:download')">
          <div>
            <img src="../images/file.png" alt="" />
            重要天气预报.pdf
          </div>
          <div @click="fileDownload">立即下载</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import VChart from 'vue-echarts'
import apiList from '@/pages/conventional-fine-forecasting/api/api'
import { usePredictionStore } from '@/pages/conventional-fine-forecasting/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
const permissions = localStorage.getItem('userInfo')
const predictionStore = usePredictionStore()
const baseLeafletMapStore = useBaseLeafletMapStore()

const isShow = computed(() => data => {
  return permissions.includes(data) || permissions.includes('*:*:*')
})
const dialogVisible = ref(false)
const chartRef = ref('')
const dialogTitle = ref('')
const pos = ref({
  lon: '',
  lat: ''
})
const currentData = ref({})
const tableData = ref([])
const predictionDayData = ref([])
const leftData = ref([])
const defaultData = () => ({
  tem: '',
  RAIN: '',
  visHor10mi: '',
  rhu: '',
  winSAvg10mi: '',
  prs: ''
})

const currentStationData = ref(defaultData())
const stationLoading = ref(false)
const filterActive = ref('TEM')
const echartsFilter = item => {
  filterActive.value = item.detailKey
  handleInitChart()
}

const handleInitData = async data => {
  stationLoading.value = true
  const res = await apiList.getFuture10DayReport({
    latitude: pos.value.lat,
    longitude: pos.value.lon
  })
  predictionDayData.value = res.data.colHeader
  tableData.value = res.data.data
  stationLoading.value = false
}

const currentChartData = ref([])

const currentChartType = ref('tem')
const chartType = ref([
  {
    name: '气温',
    unit: '℃',
    key: 'TEM',
    detailKey: 'TEM'
  },
  {
    name: '风',
    unit: 'm/s',
    key: 'WIND',
    detailKey: 'WIND'
  },
  {
    name: '湿度',
    unit: '%',
    key: 'RH',
    detailKey: 'RH'
  },
  // {
  //   name: '气压',
  //   unit: 'hpa',
  //   key: 'PRs',
  //   detailKey: 'PRs'
  // },
  {
    name: '降水',
    unit: 'mm',
    key: 'RAIN',
    detailKey: 'RAIN'
  },
  {
    name: '能见度',
    unit: 'km',
    key: 'VIS',
    detailKey: 'VIS'
  }
])
const chartOption = ref({
  title: {
    left: 'center',
    top: '10px',
    textStyle: {
      color: '#343434',
      fontSize: '14px',
      fontWeight: '400'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: {
    left: '1%',
    right: '1%',
    bottom: '1%',
    top: '12%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    axisTick: {
      show: false // 隐藏X轴刻度
    },
    axisLine: {
      lineStyle: {
        color: '#828C99',
        type: 'dashed' // 设置线条为虚线
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#828C99',
        fontSize: 13
      }
    }
  },
  yAxis: {
    type: 'value',
    // name: computed(
    //   () =>
    //     `单位：${
    //       chartType.value.find(i => i.key === currentChartType.value)?.unit
    //     }`
    // ),
    boundaryGap: ['0%', '20%'],
    alignTicks: true,
    splitNumber: 5,
    nameTextStyle: {
      color: '#828C99',
      fontSize: 13,
      align: 'left',
      verticalAlign: 'center',
      padding: [0, 0, 0, -30]
    },
    nameGap: 25,
    axisLabel: {
      color: '#828C99',
      fontSize: 13
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#CCD6EB',
        type: 'dashed' // 设置线条为虚线
      }
    }
  },
  series: [
    {
      type: 'line',
      data: [],
      symbol: 'none',
      lineStyle: {
        color: '#00F8FF',
        width: 2
      }
    }
  ]
})
const chartLoading = ref(false)
const handleInitChart = async () => {
  chartLoading.value = true
  const res = await apiList.getElementHourCurve({
    elementCode: filterActive.value,
    latitude: pos.value.lat,
    longitude: pos.value.lon
  })
  // currentChartData.value = res.result.records
  chartOption.value.xAxis.data = []
  res.data.xAxis.forEach(element => {
    chartOption.value.xAxis.data.push(String(element).slice(-2))
  })
  chartOption.value.series[0].data = res.data.yAxis
  setTimeout(() => {
    chartRef.value.resize()
    chartLoading.value = false
  }, 500)
}

const handleStationDialogVisible = (visible, data) => {
  dialogVisible.value = visible
  if (data) {
    pos.value.lon = data.lon.toFixed(4)
    pos.value.lat = data.lat.toFixed(4)
    handleInitData(data)
    dialogTitle.value = `${data.stationName}（${data.stationNum}）`
    currentData.value = data
    handleInitChart()
  }
}

useEventBus('handleStationDialogVisible').on(handleStationDialogVisible)
const fileDownload = () => {
  apiList
    .downLoadForecastPDF({
      latitude: pos.value.lat,
      longitude: pos.value.lon
    })
    .then(res => {
      // 创建Blob对象
      const blob = new Blob([res], {
        type: 'application/pdf'
      })
      // 创建临时链接
      const url = window.URL.createObjectURL(blob)

      // 创建a标签并设置相关属性
      const a = document.createElement('a')
      a.href = url
      a.download = `天气预报专报-${currentData.value.name}.pdf` // 设置下载文件的文件名
      // 触发点击事件，下载文件
      a.click()
      // 清理临时链接
      window.URL.revokeObjectURL(url)
    })
}
const handleDialogClose = () => {
  dialogTitle.value = ''
  currentData.value = {}
  currentChartType.value = 'tem'
  currentStationData.value = defaultData()
  currentChartData.value = []
}
</script>

<style scoped lang="scss">
.dialog-content {
  width: 100%;
  box-sizing: border-box;

  .info {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 39px 0 21px;
    .name {
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      line-height: 55px;
      text-shadow: 0px 0px 10px #000c5f;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .title {
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      line-height: 0px;
      text-shadow: 0px 0px 10px #000c5f;
      text-align: center;
      font-style: normal;
    }

    .time {
      font-weight: 400;
      font-size: 16px;
      color: #dde7ee;
      line-height: 0px;
      text-align: center;
      font-style: normal;
    }
  }
  .dialog-content-echart {
    height: auto;
    margin-top: 15px;
    padding: 0 21px;
    box-sizing: border-box;
    .label-title {
      width: 88px;
      height: 31px;
      background: url(../images/label-title.png) no-repeat;
      background-size: 100% 100%;
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
      line-height: 31px;
      text-shadow: 0px 0px 2px rgba(0, 230, 255, 0.63);
      text-align: left;
      font-style: normal;
      padding-left: 7px;
      box-sizing: border-box;
      margin: 25px 0 15px -17px;
    }
    .label-title-two {
      width: 101px;
      margin: 10px 0 10px -17px;
    }
    .content-top {
      width: 100%;
      height: 42px;
      display: flex;
      margin-bottom: 20px;
      .top-item {
        width: 131px;
        height: 42px;
        background: url(../images/contentData.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 19px;
        padding: 11px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .spot {
          width: 4px;
          height: 4px;
          background: #a8eaff;
          box-shadow: 0px 0px 6px 1px rgba(0, 193, 255, 0.2);
          border-radius: 3px 3px 3px 3px;
          margin-right: 14px;
        }
        .name {
          font-weight: 400;
          font-size: 14px;
          color: #afd8e5;
          line-height: 0px;
          text-align: center;
          font-style: normal;
          margin-right: 11px;
        }
        .value {
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 0px;
          text-align: center;
          font-style: normal;
        }
      }
      .top-item:last-child {
        margin-right: 0;
      }
    }
    .content-tab {
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tab-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        div {
          width: 55px;
          height: 28px;
          background: rgba(0, 75, 175, 0.39);
          border-radius: 2px 2px 2px 2px;
          border: 1px solid #3f97cf;
          font-weight: 400;
          font-size: 14px;
          color: #9bbfdf;
          line-height: 28px;
          text-align: center;
          font-style: normal;
          margin-right: 4px;
          cursor: pointer;
        }
        .echartsActive {
          width: 71px;
          height: 28px;
          background: url(../images/echartsActive.png) no-repeat;
          background-size: 100% 100%;
          color: #ffffff;
        }
      }
      .tab-right {
        display: flex;
        justify-content: flex-start;
        div {
          width: 28px;
          height: 28px;
          background: rgba(0, 75, 175, 0.39);
          border-radius: 2px 2px 2px 2px;
          border: 1px solid #3f97cf;
          margin-right: 8px;
          cursor: pointer;
          img {
            width: 28px;
            height: 28px;
          }
        }
        div:last-child {
          margin-right: 0;
        }
      }
    }
    .content-echarts {
      width: 580px;
      height: 220px;
      margin-top: 15px;
    }
    .forecast-table {
      width: 600px;
      height: 325px;
      // overflow-y: auto;
      .column {
        width: 149px;
        height: 100%;
        float: left;
        margin-right: 3px;
        .column-item {
          width: 100%;
          height: 35px;
          background: url(../images/title-bag.png) no-repeat;
          background-size: 100% 100%;
          font-weight: 400;
          font-size: 14px;
          color: #96adc5;
          line-height: 35px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
      .right-column {
        display: inline-block;
        width: calc(100% - 10px);
        height: 100%;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        .column-header {
          width: 143px;
          height: 35px;
          background: url(../images/title-bag.png) no-repeat;
          background-size: 100% 100%;
          margin-bottom: 1px;
          font-weight: 400;
          font-size: 14px;
          color: #96adc5;
          line-height: 35px;
          text-align: center;
          font-style: normal;
          cursor: pointer;
          display: inline-block;
          margin-right: 2px;
        }
        .column-header:first-child {
          width: 149px;
          font-weight: 400;
          font-size: 14px;
          color: #96adc5;
          line-height: 35px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
        .column-content {
          width: 100%;
          // box-shadow: inset 0px 0px 14px 1px rgba(0, 204, 255, 0.64);
          border-radius: 0px 0px 0px 0px;

          .right-line {
            height: 35px;
            width: 100%;
            white-space: nowrap;
            // border-bottom: 1px solid #205884;
            .right-item {
              width: 145px;
              height: 100%;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
              line-height: 35px;
              text-align: center;
              font-style: normal;
              display: inline-block;
              border-bottom: 1px solid #205884;
              background: rgba(0, 13, 35, 0.48);
            }
            .right-item:first-child {
              width: 149px;
              height: 35px;
              background: url(../images/title-bag.png) no-repeat;
              background-size: 100% 100%;
              font-weight: 400;
              font-size: 14px;
              color: #96adc5;
              line-height: 35px;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }
          }
          .right-line:last-child {
            .right-item {
              border-bottom: 1px solid transparent;
            }
          }
        }
      }
    }
    .fileDownload {
      width: 100%;
      height: 54px;
      background: url(../images/file-bag.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      div:first-child {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 0px;
        text-align: center;
        font-style: normal;
        img {
          width: 39px;
          height: 39px;
          margin-right: 17px;
          margin-left: 26px;
        }
      }
      div:last-child {
        width: 108px;
        height: 36px;
        background: url(../images/echartsActive.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 18px;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 36px;
        text-align: center;
        font-style: normal;
        cursor: pointer;
      }
    }
  }
  .number-list {
    width: 100%;
    height: 90px;
    background: #f1f1f1;
    border-radius: 4px 4px 4px 4px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;

    .el-row {
      width: 100%;

      .el-col {
        display: flex;
        align-items: center;

        .circle {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #ffffff;
          border-radius: 50%;
          border: 1px solid #317ce2;
          margin-right: 5px;
        }
      }
    }

    p {
      font-size: 16px;
      font-weight: 400;
      color: #343434;
      line-height: 30px;
    }
  }

  .chart {
    width: 100%;
    height: 300px;
    background: #f1f1f1;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #d6d6d6;

    .chart-content {
      width: 100%;
      height: calc(100% - 50px);
    }

    .chart-type {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  width: 1px; /* 设置滚动条的宽度 */
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
<style lang="scss">
.el-overlay {
  z-index: 100000 !important;
}

.custom-dialog-pre {
  background-color: transparent;
  min-height: 852px;
  background: url(../images/dialog-bag.png) no-repeat;
  background-size: 100% 100%;
}
.el-overlay-dialog {
  position: fixed;
  top: -120px;
  right: 0;
  bottom: 0;
  // left: -1024px;
  overflow: auto;
}
</style>
